<template>
  <!-- 工单分类 -->
  <div v-loading="loading">
    <div id="chart-WorkOrderClassifyBox" class="chart-box"></div>
  </div>
</template>

<script setup lang="ts" name="WorkOrderClassifyBox">
import { ref, watch, onMounted } from "vue";
import { findAllCategoryNoCount } from "@/api/modules/index";
import * as echarts from "echarts";

const dateArr = ref<any>([]);
const list = ref<any[]>([]);
const loading = ref(false);

let chartDom;
let myChart;
let option;

interface ListItem {
  name: string;
  value: number;
}

const getData = () => {
  loading.value = true;
  findAllCategoryNoCount({})
    .then((res: any) => {
      loading.value = false;
      const list = ref<ListItem[]>([]);
      for (const key in res) {
        if (Object.prototype.hasOwnProperty.call(res, key)) {
          const element = res[key];
          list.value.push({
            name: key,
            value: element
          });
        }
      }

      chartDom = document.getElementById("chart-WorkOrderClassifyBox");
      myChart = echarts.init(chartDom);
      option = {
        tooltip: {
          trigger: "item"
        },
        legend: {},
        series: [
          {
            name: "工单分类",
            type: "pie",
            radius: "50%",
            data: list.value,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    })
    .catch(() => {
      list.value = [];
      loading.value = false;
    });
};

watch(
  () => dateArr.value,
  val => {
    getData();
  }
);

onMounted(() => {
  let myDate = new Date();
  let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
  let month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  let month_text = "";
  month_text = month > 9 ? "" + month : "0" + month;
  let day = myDate.getDate(); //获取当前日(1-31)
  let day_text = "";
  day_text = day > 9 ? "" + day : "0" + day;
  dateArr.value = [year + "-01-01", [year, month_text, day_text].join("-")];
});
</script>

<style scoped lang="scss">
.chart-box {
  height: 360px;
  margin-top: 20px;
}
</style>
